<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="500px"
    :before-close="handleClose"
  >
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="formData"
      label-width="100px"
      label-position="right"
      style="width: 400px"
      status-icon
    >
      <el-form-item
        label="类型："
        prop="type"
      >
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">目录</el-radio>
          <el-radio :label="2">菜单</el-radio>
          <!-- 新增一级目录的时候此按钮不显示，新增子菜单时此按钮显示 -->
          <el-radio v-if="formData.parentId !== 0" :label="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="formData.name"/>
      </el-form-item>
      <el-form-item label="权限标识：" prop="code">
        <el-input v-model="formData.code"/>
      </el-form-item>
      <!-- 如果 type != 3 不等于 3（按钮）才显示出来 -->
      <el-form-item v-if="formData.type !== 3" label="请求地址：" prop="url">
        <el-input v-model="formData.url"/>
      </el-form-item>
      <!-- 如果 type != 3 不等于 3（按钮）才显示出来 -->
      <el-form-item v-if="formData.type !== 3" label="图标：" prop="icon">
        <el-input v-model="formData.icon"/>
      </el-form-item>
      <el-form-item label="排序：" prop="sort">
        <el-input-number v-model="formData.sort" :min="1" :max="10000" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="formData.remark" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="'menu:add'" type="primary" size="mini" @click="submitForm('ruleForm')">确定</el-button>
        <el-button v-permission="'menu:add'" size="mini" @click="handleClose">取消</el-button>
        <el-button v-permission="'menu:add'" size="mini" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import api from '@/api/menu'

export default {
  // 接收父组件传递过来的属性数据
  props: ['title', 'visible', 'formData', 'remoteClose'],
  data() {
    return {
      rules: {
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }],
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 关闭窗口
    handleClose() {
      this.$refs['ruleForm'].resetFields()
      this.remoteClose()
    },
    // 提交表单数据
    submitForm(formRef) {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          // 如果新增的是按钮，清空以下两项
          if (this.formData.type === 3) {
            this.formData.url = ''
            this.formData.icon = ''
          }
          this.addOrUpdate()
        } else {
          return false
        }
      })
    },
    async addOrUpdate() {
      let response = null
      // 有id值则修改,没有id值则新增
      if (this.formData.id) {
        response = await api.update(this.formData)
      } else {
        response = await api.add(this.formData)
      }
      if (response.code === 200) {
        this.$message.success(response.message)
        // 关闭窗口
        this.handleClose()
      } else {
        this.$message.error(response.message)
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped>

</style>
